<template>
	<div id="container">
		<header>
			<van-nav-bar
			  :fixed="true"
			  title="设置"
			  left-text="返回"
			  left-arrow
			  @click-left="onClickLeft"
			/>
		</header>
		<!-- content -->
		<div id="content">
			<!-- 头像+详情 -->
			<div class="setafter-item">
				<div class="item1">
					<van-image
					  round
					  width="50px"
					  height="50px"
					  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572930040869&di=f28f53accfc15fdff85014d7b3322691&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201809%2F14%2F20180914150259_ScPvi.jpeg"
					/>
				</div>
				<div class="item2">
					<h3>{{this.$store.state.usernames}}</h3>
					<h4>用户ID：{{'10050805_'+this.$store.state.uids}}</h4>
				</div>
			</div>
			<!-- setafter-update -->
			<div class="setafter-update">
				<van-cell @click="uppwd()" title="修改登录密码" is-link />
				<van-cell @click="upuser()" title="修改用户名" is-link />
				<van-cell title="收货地址管理" is-link @click="address()"/>
			</div>
			<!-- setafter-other -->
			<div class="setafter-other">
					<van-cell title="通用" is-link />
					<van-cell title="微信有礼" is-link />
					<van-cell title="清除缓存" is-link />
					<van-switch-cell v-model="checked" title="开启指纹解锁" />
			</div>
			<!-- setafter-about -->
			<div class="setafter-about">
				<van-cell title="企业官网" is-link />
				<van-cell title="我要给好评" is-link />
				<van-cell title="关于我们" is-link />
			</div>
			<!-- setafter-quit -->
			<div class="setafter-quit">
				<van-button @click="back()" type="danger">退出登录</van-button>
			</div>
			
		</div>
	</div>
</template>

<script>
	import {Dialog} from 'vant'
	export default{
		name:'Settingafter',
		data(){
			return{
				  checked: true
			}
		},
		methods:{
			onClickLeft(){
				this.$router.go(-1)
			},
			address(){
				this.$router.push('/getinfo')
			},
			uppwd(){
				this.$router.push('/uppwd')
			},
			upuser(){
				this.$router.push('/upuser')
			},
			back(){
				let uid=''
				let token=''
				let username ="注册/登录"
				this.$store.commit('login',{username,uid,token})
				Dialog({message:'退出成功'}).then(()=>{
					this.$router.push('/mine')
				})
				
			}
		},
		mounted(){
			
		}
	}
</script>

<style scoped>
h1,h2,h3{
	padding: 0;
	margin: 0;
}
#container{
	height: 100%;
	background: #f3f3f3;
}
/* ---------------------header------------- */
header .van-nav-bar{
	height:47px;
	border:1px solid #F3F3F3;
}
header .van-nav-bar__title{
	font-size:21px;
	font-weight:600;
	font-family:"楷体";
}
header .van-nav-bar__text{
	font-size:18px;
	color: #000000;
	font-weight:600;
	font-family: "楷体";
}
header .van-icon-arrow-left{
	font-size: 18px;
	color: #000000;
}
/* -----------------settingafter-content-item---------- */
#content{
	margin-top: 47px;
}
.setafter-item{
	display: flex;
	height: 90px;
	background-color: #fff;
	position: relative;
	margin-bottom: 10px;
}
.setafter-item .item1{
	margin: 15px 15px 22px 17px;
}
.setafter-item .item2 h3{
	font-size: 18px;
	font-weight: 600;
	font-family: "楷体";
	margin-top:15px;
	color: #323232;
}
.setafter-item .item2 h4{
	font-size: 18px;
	font-weight: 600;
	font-family: "楷体";
	margin-top:13px;
	color: #626262;
}
.setafter-item .van-icon-arrow{
	font-size:18px;
	color:#b2b2b2;
	font-weight: 600;
	position: absolute;
	top:38px;
	right:17px;
}
/* --------------------setafter-update--------------------- */
.setafter-update{
	margin-bottom: 10px;
}
.setafter-update .van-cell__title{
	font-family:"楷体";
	font-weight:600;
	font-size: 18px;
}
.van-cell--clickable{
	height: 52px;
}
/* ------------------setafter-other----------------- */
.setafter-other{
	margin-bottom: 10px;
}
.setafter-other .van-cell__title{
	font-family:"楷体";
	font-weight:600;
	font-size: 18px;
}
.setafter-other .van-cell--clickable{
	height: 57px;
}
.van-switch-cell{
	height: 57px;
}
/* ----------------setafter-about------------------- */
.setafter-about {
	margin-bottom:22px;
}
.setafter-about .van-cell__title{
	font-family:"楷体";
	font-weight:600;
	font-size: 18px;
}
.setafter-about .van-cell--clickable{
	height: 57px;
}
/* -----------------setafter-quit------------- */
.setafter-quit .van-button--danger{
	width:306px;
	height:47px;
	margin-left:35px;
	border-radius:4px;
	background-color: #f43018;
	margin-bottom: 25px;
	font-size: 20px;
	font-family: "楷体";
}
.van-cell:not(:last-child)::after{
	border-bottom: 1px solid #999;
}
</style>
